<template>
	<view class="container">
		<u-navbar v-if="expandLevel==2" :is-back="true" :title="linename" :background="background" :border-bottom="false">
		</u-navbar>
		<u-navbar v-else title-color="#fff" :is-fixed="true" :is-back="false" :border-bottom="false">
			<view class="slot-wrap">
				<diyNav text=" " :isTwo="false" :isWhite="false" background=""></diyNav>
			</view>
		</u-navbar>
		<!-- <uMap class="map" @regChange="regChange" ref="pathDetailMap" ></uMap> -->
	<!-- 	<view class="map-contarin">
			<map id="pathDetailMap" ref="pathDetailMap" class="map-content"  @regionchange="bindregionchange"  :circles="circles"  :controls="controls" :includePoints="includePoints" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline" :scale="scale" :showLocation="showLocation">
			</map>
		</view> -->
		<draw @drawerMove="onDrawerMove" @layerChange="onLayerChange" class="layer" :currentLayer="1" :drawerHeight="drawerHeight" :drawerMarginTop="drawerMarginTop" :layers="drawerLayers" :pixelRatio="pixelRatio">
			<view class="top-panel flex-v flex-h-vcenter" v-if="expandLevel!=2">
				<view  style="width:100%;display:flex;flex-direction:row-reverse">
					<image @click="onLocation"  class="v-location" src="../../static/images/bus/ico_map_location.png"></image>
				</view>
			</view>
			<view class="min-layer">
				<view v-if="expandLevel==1" class="arrup-main" style="text-align: center;"><image style="width: 24px;height: 6px;" src="/static/images/bus/arrow_down.png" mode=""></image></view>
				<view v-if="expandLevel==0" class="arrup-main" style="text-align: center;"><image style="width: 24px;height: 6px;" src="/static/images/bus/arrow_up.png" mode=""></image></view>
				
				<view style="background: #fff;padding-bottom: 16rpx;">
					<view class="marginleft40-row-flex">
						<view style="margin-top:20rpx;">
							<text class="home-font-main-34">{{frontName}}</text>
							<image src="/static/images/bus/direction.png" style="margin-left:12rpx;width:30rpx;height:12rpx;margin-top:auto;margin-bottom:8rpx"></image>
							<text class="home-font-main-34" style="margin-left:12rpx;margin-top:40rpx">{{terminalName}}</text>
						</view>
						<view @click.stop="exchange" v-if="loop===0" style="margin-left:auto;padding-left:20rpx;padding-right:44rpx;padding-top:20rpx;padding-bottom:16rpx;">
							<image src="/static/images/bus/ex_dir.png" style="width:28rpx;height:24rpx;margin-top:auto;margin-bottom:auto;"></image>
							<text class="home-font-main-28 " style="margin-left:12rpx;white-space: nowrap;">换向</text>
						</view>
					</view>
					<view class="marginleft40-row-flex">
						<text class="font-color-weak-28 ">{{length}}</text>
						<text class="font-color-weak-28" style="width:238rpx;margin-left:20rpx">{{price}}</text>
					</view>
					<view class="marginleft40-row-flex">
						<text class="font-color-weak-28">{{bustime}}</text>
		
					</view>
				</view>
				<view class="card_container column" style="margin-left：40rpx;margin-top:40rpx;padding:32rpx 0rpx;background:#fff;margin-bottom: 20px;">
				         <view class="">
				         	<text class="font-color-mid-28" style="margin-left:40rpx" v-if="busArriveData.status==1">距<text style="color: #000000;font-size: 30rpx;margin: 0 8rpx;">{{selectStation.name}}</text>最近{{carDataList.length}}班：</text>
				         	<text class="font-color-mid-28" style="margin-left:40rpx" v-else><text style="color: #000000;font-size: 30rpx;">{{selectStation.name}}</text></text>
							<text class="line-text">{{linename}}</text>
				         </view>
				         <view class="row" style="margin-top:20rpx;">
				             <view v-for="(item,index) in carDataList" :key="index" style="margin: 0 20px;">
				                 <view class="display-flex">
											<image src="/static/images/bus/an_realtime.gif" style="width:12rpx;height:24rpx;margin:auto 8rpx auto 40rpx;"v-if="item.status==1"></image>
											<view style="height:46rpx;margin:auto 8rpx auto 8rpx;color: #26A2FF;" v-if="item.status==1"><text style="font-weight: 700;font-size: 48rpx;">{{item.time}}</text>分钟</view>
											<view style="height:46rpx;margin:auto 8rpx auto 8rpx;color: #26A2FF;" v-if="item.status==2"><text style="font-weight: 700;font-size: 48rpx;">{{item.text}}</text></view>
											
										</view>
				                 <view style="margin: 3px 0 0 20px;">
											<text class="" style="font-size:26rpx;"  v-if="item.status==1">{{item.text}}·</text>
											<text class="" style="font-size:26rpx;"  v-if="item.status==1">{{item.dis}}</text>
								</view>
				             </view>
				            <view class="" style="margin: 0 30px;" v-if="busArriveData.status!=1">
				                
				                 <view style="margin: 3px 0 0 110px;">
				             		<text class="" style="font-size:36rpx;font-weight: 500;color: #007AFF;">{{busArriveData.notice}}</text>
				             	</view>
				             </view>
				         </view>
				 </view>
				 <scroll-view class="nowrap scroll-view"  :scroll-x="true" style="width:750rpx" :scroll-into-view="'station'+(toIndex <= 6 ? 0 : toIndex-5)">
				 	<view class="row"  style="width:120rpx;display: inline-flex;" v-for="(station,stationid) in stations" :key="stationid" :id="'station'+stationid">
				 		<view class="column" style="width:120rpx;">
				 			<!-- <image src="/static/images/bus/anti_arrow.png" style="width:60rpx;height:40rpx;margin:0rpx auto;" v-if="showarrow&&stationid==selectStation.station_num-1"></image> -->
				 			<view style="height:40rpx;margin:0rpx auto;"></view>
				 			<!-- 实时车位置 -->
				 			<view v-for="(car,carIndex) in carList" :key="carIndex" v-if="(car.next_station-1)==stationid" :style="car.car_num>1?'':'margin-top: 15px;'" style="width:125rpx;display:flex;position:absolute;" >
				 				<view  class="column" style="width:56rpx;height:58rpx;margin: 0 0 0 -10px;" >
				 					<text class="font-color-weak-20" style="margin:0rpx auto;" ></text>
				 					<text  style="margin:0rpx auto;color: #26A2FF;font-size: 10px;" v-if="car.car_num>1">{{car.car_num}}辆</text>
				 					<image src="/static/images/bus/bus_icon.png" style="width:56rpx;height:30rpx;"></image>
				 				</view>
				 			</view>
				 			<!-- 站点线 -->
				 			<view style="width:120rpx;height:38rpx; display:inline-flex;  text-align: center;margin-top: 20rpx; align-items: center;  justify-content: center;">
				 				<image src="/static/images/bus/right_arrow.png" style="width:38rpx;height:38rpx;  position: absolute;  z-index: 100;" v-if="stationid==selectStation.station_num"></image>
				 				<image src="/static/images/bus/qi5.png" style="width:38rpx;height:38rpx;  position: absolute;  z-index: 100;" v-else-if="stationid==0"></image>
				 				<image src="/static/images/bus/zhong.png" style="width:38rpx;height:38rpx;  position: absolute;  z-index: 100;" v-else-if="stationid==stations.length-1"></image>
				 				<image src="/static/images/bus/white_arrow.png" style="width:10rpx;height:10rpx;  position: absolute;  z-index: 100;" v-else></image>
				 				<view class="row">
				 					<view style="width:60rpx;height:16rpx;background:#FFFFFF;z-index:1;" v-if="stationid==0"></view>
				 					<view style="width:60rpx;height:16rpx;background:#26A2FF;z-index:1;" v-else></view>
				 					<view style="width:60rpx;height:16rpx;background:#FFFFFF;z-index:1;" v-if="stationid==stations.length-1"></view>
				 					<view style="width:60rpx;height:16rpx;background:#26A2FF;z-index:1;" v-else></view>
				 				</view>
				 			</view>
				 			<!-- 站点名 -->
				 			<view class="row" style="justify-content: center;width:125rpx;">
				 				<view class="column" style="margin-top:12rpx;writing-mode:vertical-lr;">
				 					<text @click="selectStationHandel(stationid)" :class="stationid==selectStation.station_num?'text-green-30':'font-color-mid-30'" :id="stationid">{{station.name}}</text>
				 				</view>
				 				<view v-if="stationid==nearestStation.station_num">
				 					<text style="margin-top:16rpx;color:#26A2FF;font-size:22rpx;writing-mode:vertical-rl;border:1rpx solid #26A2FF;border-radius:4rpx;padding:4rpx 2rpx;background:rgba(33,77,255,0.06)">离我最近</text>
				 				</view>
				 			</view>
				 		</view>
				 	</view>
				 </scroll-view>
			</view>
		</draw>
		<view class="footer">
			<view class="wrap-footer">
				<view @click="exchange" class="column" style="margin-left:129rpx;margin-top:14rpx">
					
					<button open-type="feedback" style="display: contents;" class="btn-feedback">
						<image src="../../static/images/bus/feedback.png" style="width:46rpx;height:46rpx"></image>
						<text  style="font-size:22rpx;text-align:center;margin-top:6rpx;line-height: normal;color: #959595;">反馈</text>
					</button>
				</view>
				
				<view @click="refreshHandel" class="column" style="margin-left: 1px;margin-top:14rpx">
					<image :animation="animationData" src="../../static/images/bus/icon-fresh.png" style="width:46rpx;height:46rpx;margin-right:25rpx;margin-left:25rpx"></image>
					<text  style="font-size:22rpx;text-align:center;margin-top:6rpx;">刷新</text>
				</view>
				<view  v-if="!isCollect"  @click="collect"  class="column" style="margin-right:100rpx;margin-top:14rpx">
				
					<image :src="isCollect?'../../static/images/bus/btn-save.png':'../../static/images/bus/unbtn-save.png'" style="width:46rpx;height:46rpx"></image>
					<text class="isfavorite?'tab-text-green':'tab-text-gray'" style="font-size:22rpx;text-align:center;margin-top:6rpx;">收藏</text>
				</view>
				<view v-else @click="cancelCollect" class="column" style="margin-right:100rpx;margin-top:14rpx">
					<image :src="isCollect?'../../static/images/bus/btn-save.png':'../../static/images/bus/unbtn-save.png'" style="width:46rpx;height:46rpx"></image>
					<text class="isfavorite?'tab-text-green':'tab-text-gray'" style="font-size:22rpx;text-align:center;margin-top:6rpx;">已收藏</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
	 import uMap from '@/components/u-map/index.vue'
	 import draw from '@/components/draw_app/index.vue'
	 import b_util from "@/common/js/busutil.js"
	 import diyNav from '@/components/nav/index.vue'
	 import { mapState } from 'vuex';
	 import Cache from '../../utils/cache';
	 import { CITY_INFO} from '../../config/cache.js'
	export default {
		components: {
			uMap,
			
		 },
		 computed: {
		 	...mapState(['loginPopupShow'])
		 },
		data() {
			return {
				systemType:'',
				drawerLayers: [ 500, 1084 ],
				background: {
					background: '#fff'
				},
				isCollect:0,
				status:1,
				showLoading: true,
				showError: false,
				frontName: "",
				terminalName: "",
				linename: "",
				lineId: "",
				stationId: "",
				stations: [],
				bustime: "",
				price: "",
				loop: 0,
				length: "",
				interval: "",
				directInverseId: "",
				busData:[],
				isRealtimeBus: 0,
				initStationNum: -1,
				showarrow: !0,
				selectStation: {},
				realtimeBuslist: [],
				nextStation: {},
				flag: '',
				setInterName: '',
				reveser_id: '',
				nearestStation: {},
				isRefreshing: 0,
				isRealtimeLine: true,
				toIndex: '',
				carList: [],
				carDataList: [],
				busMapList:[],
				busArriveData:{},
				isfavorite: false,
				isArrowUp:true,
				drawerHeight: '',
				drawerMarginTop: '',
				pixelRatio: '',
				expandLevel: 1,
				showFadeAnim:'',
				isShowLineAnimation: 0,
				pathDetailMap:{},
				points:[],
				stationMarkers:[],
				carMarkers:[],
				showLocation: true,
				latitude: "26.600325",
				longitude: "106.705484",
				includePoints: [],
				markers: [],
				polyline: [],
				scale: 14,
				controls: [],
				mapHeight: {
					type: String,
					value: ""
				},
				circles: [],
				selectStationMarker:[],
				screenWidth:'',
				screenHeight:'',
				animationData:'',
				ExAnimationNum: 1,
				favoriteBus:'',
				statusBarHeight:''
				
			}
		},

		onLoad(t) {
			try {
			
					var i =  uni.getSystemInfoSync(),
					a = Math.max(i.screenHeight, i.screenWidth), 
					o = Math.min(i.screenHeight, i.screenWidth);
					a = Math.max(a, i.windowHeight), 
					o = Math.max(o, i.windowWidth);
					//获取手机状态栏高度
					
					this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];			
					// #ifdef MP
				
					var r = i.windowWidth / 750,  d = uni.getMenuButtonBoundingClientRect(), u = d.bottom > 0 ? d.bottom : 128 / r;
					
					// #endif
					
					// #ifdef H5
					var r = i.windowWidth / 750,  u = 56;
					// #endif
					
					// #ifdef APP-PLUS
					var r = i.windowWidth / 750 ;
					var u = this.statusBarHeight+44;
					// #endif
					
				
					this.screenHeight = a, 
					this.screenWidth = o;
					
					this.drawerHeight = a - u
					this.drawerMarginTop = u
					this.pixelRatio = r
					this.drawerLayers.length == 2 && this.drawerLayers.push((a - u) / r), 

					
				  this.systemType =	i.system && i.system.indexOf("iOS") > -1 ? "IOS" : i.system && i.system.indexOf("Android") > -1 ? "ANDROID" : "OTHER";
				
			} catch (t) {
				console.error("getSystemInfo  fail", t);
			}
			//
			
			this.lineId = t.lineId
			this.reveser_id = t.reveser_id
			this.stationId = t.stationId
			
		},
		onShow() {
			// #ifdef APP-PLUS || H5
			if(!uni.getStorageSync('hasLogin')){
				uni.navigateTo({
					url:"/pages/phone_login/index"
				})
			}
			// #endif
			// this.$refs.loading.open()		
			this.getBusLineBasic(this.stationId);
			
			if(uni.getStorageSync('hasLogin')){
			   this.isCollectLine()
			}
			
						
			
		},
		onUnload() {
			console.log('去除定时器1111')
		    clearInterval(this.setInterName);
		},
		onhide() {
			console.log('去除定时器2222')
		    clearInterval(this.setInterName);
		},
		methods: {
			getBusLineBasic(selectStationId) {
			       var that = this;							
					// 	console.log(2323232323423)
						
			       that.$u.api.realbusLineDetail({line_id:that.lineId}).then((res) => {
			           if (res.code === 0) {
						   
			               var lineInfo = b_util.parseNomalBus(res.data)
			               // console.log('实时站点'+JSON.stringify(stationInfo))
			               that.linename = res.data.key_name
			               that.frontName = lineInfo.frontName;
			               that.terminalName = lineInfo.terminalName;
			               that.bustime = lineInfo.bustime;
			               that.price = lineInfo.price;
			               that.length = lineInfo.length;
			               that.stations = lineInfo.stations;
			               that.loop = lineInfo.loop;
			               that.showLoading = false;
			               var stationList = that.stations, stationLength = stationList.length, recentStation = {};
			               /** 获取当前位置经纬度 **/
			               var curLocation =uni.getStorageSync('current_address_info');
			               /** 获取最近站点 distance计算当前位置距离第一个站点距离，遍历计算每个站点距离当前位置距离 如果比distance小则替换 冒泡算法 **/
			               /** 如果选择某个站点 **/
			               if (selectStationId) {
			                   that.stationId = selectStationId //离我最近的站点
			                   for (var i = 0; i < stationLength; i++) if (selectStationId == stationList[i].station_id) {
			                       recentStation = stationList[i];
			                       that.stationId = selectStationId;
			                       break;
			                   }
			               } else {
			                   recentStation = stationList[0];
			                   that.stationId = recentStation['station_id'];
			                   for (var distance = b_util.calculateDistance(curLocation, recentStation), index = 1; index < stationLength; index++) {
			                       /** 计算每个站点距离当前位置的距离 **/
			                       var preStation = stationList[index], itemDistance = b_util.calculateDistance(curLocation, preStation);
			                       if (itemDistance < distance) {
			                           distance = itemDistance;
			                           recentStation = stationList[index];
			                           that.stationId = recentStation['station_id'];
			                       }
			                   }
			               }
			               var nextStation = recentStation.station_num == stationLength ? stationList[stationLength - 1] : stationList[recentStation.station_num];
			               var initStationNum = 1;
			               initStationNum = recentStation.station_num < 6 ? 1 : recentStation.station_num - 4,
						   that.nextStation = nextStation, //下一站
						   that.selectStation = recentStation,
						   that.nearestStation = recentStation,  // 最近站点
						   that.initStationNum = initStationNum,
						   
						   that.latitude =  that.selectStation.lat 
						   that.longitude = that.selectStation.lng
						   
						   that.setRealtimeBus(that.stationId, recentStation.station_num);
						   
						   that.initPolyLine(res.data.routes.split(';'))
						   
						    that.initMarker(res.data.stations)
							
							
						     // that.initPolyLine(polyline)
						   // that.initMarker(that.stations)
						    // that.initIncludePoints(that.stations)
						    // that.setRealtimeBus(that.station_id)
						   
			
			           } else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
			           }
			       })
			   },
			
		    async setRealtimeBus(curStationId, stationNum) {
			   var that = this;
			   that.getRealBus(curStationId);
			   /** 定位到当前站点 **/
			   that.toIndex = stationNum;
			   clearInterval(that.setInterName)
			   that.setInterName = setInterval(() => {
				   setTimeout(() => {
					   that.getRealBus(that.selectStation.station_id);
				   }, 0)
			   }, 25000)
		    },
			   // 传入不同的站点
		    async getRealBus(curStationId) {
						
			   var that = this;
						
						
							
			   this.$u.api.fetchRealBus({line_id:that.lineId ,current_station_id: curStationId,}).then((res) => {
				   if (res.code === 0) {
					   var realLineData = res.data; //实时路线信息
					   var stationList = that.stations; //站点列表
										
									
					   
					   
					   var busArriveData = b_util.parseRealtimeBusLineStation(realLineData,that.selectStation); //解析实时公交站点
					   
					  
					   var tripList = realLineData.trip; //实时车辆列表
					   var stationShowCarController = []; //车辆显示控制列表
					   var select_station_num = parseInt(that.selectStation.station_num); //选择的站点
								
						that.carList = tripList;
								
						
						that.busArriveData = busArriveData
						if(busArriveData.status&&busArriveData.trip.length>2){
							that.carDataList = busArriveData.trip.slice(0,2)
						}else if(busArriveData.status){
							that.carDataList = busArriveData.trip
						}
						 that.busMapList = b_util.parseRealtimeMapText(realLineData,that.selectStation).trip
				

					  	that.initCarMarker(that.busMapList)	
						 that.setMapScaleByExpandLevel(this.expandLevel);
						// that.initIncludePoints(that.selectStation,that.carList)	
						
					   that.showLoading = false;
					   that.isRefreshing = false;
				   } else {
					  // that.$fetch.toast(res.msg)
				   }
		
			   })
		    },
			   // 换向
		    exchange() {
						this.$refs.loading.open()
			   var t = '';
			   if (this.reveser_id && this.reveser_id != this.lineId) {
				   var temp = this.lineId;
				   this.lineId = this.reveser_id;
				   this.reveser_id = temp;
				   this.stations = [],
					   this.selectStation = {}
			   } 
			   this.getBusLineBasic();
		    },
			
			
			collect() {
var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""				
				this.$u.api.collectLine({
					line_id: this.lineId,
					opr: 1,
					c_type: 'collect',
					type: 2,
					city_id: city.id,
							station_id: this.selectStation.station_id
				}).then(res => {
					if (res.code == 0) {
						this.isCollect = 1
						this.$u.toast('收藏成功')
					}
				})
			},
			cancelCollect() {
				var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				this.$u.api.collectLine({
					line_id: this.lineId,
					opr: 2,
					c_type: 'collect',
					type: 2,
					city_id: city.id
				}).then(res => {
					if (res.code == 0) {
						this.isCollect = 0
						this.$u.toast('取消收藏成功')
					}
				})
			},
			isCollectLine() {
				vvar city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
				this.$u.api.isCollectLine({
					line_id: this.lineId,
					c_type: 'collect',
					type: 2,
					city_id: city.id
				}).then(res => {
					if (res.code == 0) {
						this.isCollect = res.data
					}
				})
			},
			/**选择站点**/
			selectStationHandel(stationid) {
				 var i = this.stations[stationid];
				 this.selectStation = i
				 this.stationId = i.station_id
				 this.getRealBus(i.station_id)
				 this.setMapScaleByExpandLevel(this.expandLevel);
			 },
			onDrawerMove(){},
			onLayerChange(t){
				var e = t.expandLevel;
				if (this.expandLevel != e) {
					this.expandLevel = e
				    this.setMapScaleByExpandLevel(e);
					
				}
			},
			getBusPos: function(t) {
			        if (t.length > 0) {
			            var e = t[0];
			            if (e.y && e.x) return {
			                latitude: e.y,
			                longitude: e.x
			            };
			        }
			        return null;
			    },
			
			 setMapScaleByExpandLevel: function(t) {
	
				if (this.selectStation &&  t != 2) {
					var e = this.getBusPos(this.carList), i = {
						latitude: this.selectStation.lat,
						longitude: this.selectStation.lng
					};
					if (e && b_util.getDistance(e, i) > 50) {
						var a = [ e, i ];
						a = this.getIncludePoints(a, t)
						this.includePoints = a
						
					} else {
						var o = this.getCenterPoints(i, t);
						this.includePoints = o
					}
				}
			},
			
			/**视野内经纬度***/
			getIncludePoints: function(t, e) {
				var i = void 0, a = void 0, o = void 0, s = void 0;
				t.forEach(function(t) {
					i = !i || t.latitude > i ? Number(t.latitude) : i, a = !a || t.latitude < a ? Number(t.latitude) : a, 
					o = !o || t.longitude < o ? Number(t.longitude) : o, s = !s || t.longitude > s ? Number(t.longitude) : s;
				});
				var n = (0 == e ? this.drawerLayers[0] : this.drawerLayers[1]) * (this.screenWidth / 750), r = this.screenWidth / (this.screenHeight - n), d = (s - o) / (i - a) > r, c = t[0].latitude > t[1].latitude;
				if (d) {
					var u = ((s - o) / r - (i - a)) / 2;
					i += u, a -= u;
				} else {
					var l = ((i - a) * r - (s - o)) / 2;
					s += l, o -= l;
				}
				var h = (0 == e ? 64 : 128) / this.screenHeight, m = {
					left: .1,
					right: .1,
					top: c ? 2 * h : h,
					bottom: h
				};
				if (d) {
					var p = (s - o) / (1 - m.left - m.right) * m.left, f = (s - o) / (1 - m.left - m.right) * m.right;
					s += f, o -= p;
					var g = (p + f) / r / 2;
					i += g, a -= g;
				} else {
					var y = (i - a) / (1 - m.top - m.bottom) * m.top, _ = (i - a) / (1 - m.top - m.bottom) * m.bottom;
					i += y, a -= _;
					var b = (y + _) * r / 2;
					s += b, o -= b;
				}
				return a = i - (i - a) / (1 - n / this.screenHeight), [ {
					latitude: i,
					longitude: o
				}, {
					latitude: a,
					longitude: s
				} ];
			},


            /**计算地图中心**/
			getCenterPoints: function(t, e) {
				var i = (0 == e ? this.drawerLayers[0] : this.drawerLayers[1]) * (this.screenWidth / 750), a = this.screenWidth, o = this.screenHeight - i, s = t.longitude - .005, n = t.longitude + .005, r = .01 * o / a, d = t.latitude + r / 2;
				return [ {
					latitude: d,
					longitude: s
				}, {
					latitude: d - (d - (t.latitude - r / 2)) / (1 - i / this.screenHeight),
					longitude: n
				} ];
			},
			
			/***地图视野发生变化***/
			bindregionchange (e){
				let map = uni.createMapContext('pathDetailMap');
				var that = this
				
			
				map.getScale({
					success(res) {
				
					map.getCenterLocation({
						success: function success(res1) {
							// 移动地图，查询IPO点，
						
							if(that.scale!=res.scale){
								that.scale = res.scale
								that.initMarker(that.stations)
								// that.initCarMarker(that.carList)
								that.longitude = res1.longitude
								that.latitude = res1.latitude
								that.initCarMarker(that.busMapList)
								// that.initIncludePoints(that.selectStation,that.carList)	
							}
								
					
						}
					});
					}
				})
			},
			initPolyLine(route){
				var that = this
				that.polyline = []
				that.points = []
				route.forEach(function(item){
					
					that.points.push({latitude: item.split(',')[1], longitude: item.split(',')[0]})
				})
				var polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
							points:this.points,
							color:"#26a2ff",//线的颜色
							width:9,//线的宽度
							borderColor: "#26a2ff",
							dottedLine: false,
							borderWidth: true,
							arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
						}]
				that.polyline = polyline
			},
			initIncludePoints(selectStation, carList){
				this.includePoints = []
				var that = this
				var data =[]
				var carOne = ''
				carList.forEach(res => {
					if(res.station_left>0){
						carOne = res
					}
				})
				if(carOne){
					data = [
						{latitude: selectStation.lat, longitude: selectStation.lng},
						{latitude: carOne.y, longitude: carOne.x},
					]
					
				} else{
					data = [
						{latitude: selectStation.lat, longitude: selectStation.lng}
					]
					
				}
				that.longitude = selectStation.lat
				that.latitude = selectStation.lng
				//initPolyLine(that.routes)
				that.includePoints = data
			
			},
			initMarker(stat){
				this.stationMarkers =  []
				var that = this
				var data =[]
				stat.forEach(function(item, i){
					item.lng = item.xy_coords.split(',')[0]
					item.lat = item.xy_coords.split(',')[1]
					data.push(that.getMarkerObj(stat,item, i,that))
				})
				that.stationMarkers = data
			},
			
			initSelectStationMarker(stat){
				var that = this
				var data = []
				that.selectStationMarker = []
				data.push(that.selectStationMarkerObj(stat,that))
				that.selectStationMarker = data
			},
			getMarkerObj(stat,item,i,that){
				var data = {}
					if(i==0){ //起點
						data = {
						   id: item.id,　	
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/start_point.png',
						   width:20,
						   height:20,
						  
						   label: {
								content: item.name,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.name.length % 2 == 0 ? item.name.length / 2 * 12 : (item.name.length - 1) / 2 * 12 + Math.floor(6)) - 3
					
							}
						 }
					} else if(i==stat.length-1){ //終點
						data = {
						   id: item.id,
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/end_point.png',
						   width:20,
						   height:20,
						  
						   label:{
								content: item.name,
								color: "#1B1B1B",
								fontSize: 12,
								padding: 1,
								textAlign: "center",
								bgColor: "#ffffff",
								borderRadius:5,
								y: "IOS" === that.systemType ? 10 : 7,
								x: -(item.name.length % 2 == 0 ? item.name.length / 2 * 12 : (item.name.length - 1) / 2 * 12 + Math.floor(6)) - 3
							}
					 }
					}else{
						data = {
						   id: item.id,
						   latitude:item.lat,
						   longitude: item.lng,
						   iconPath: '/static/images/bus/bus-staion-bule.png',
						   width:15,
						   height:15,
						
						   label:that.scale>=15?{
							content:item.name,
							color: "#1B1B1B",
							fontSize: 12,
							padding: 5,
							textAlign: "center",
							bgColor: "#ffffff",
							borderRadius:5,
							y: "IOS" === that.systemType ? 10 : 7,
							x: -(item.name.length % 2 == 0 ? item.name.length / 2 * 12 : (item.name.length - 1) / 2 * 12 + Math.floor(6)) - 3
						  }:''
						}
					}
				
				return data
			},
				 
			initCarMarker(stat){
				var that = this
				that.carMarkers = []
				var data =[]
				stat.forEach(function(item, i){
				
					data.push(that.getCarMarkerObj(item, i))
				})
				that.carMarkers = data
				that.initSelectStationMarker(that.selectStation)
				var markers = that.stationMarkers.concat(that.carMarkers).concat(that.selectStationMarker)
				
				
				// this.$refs.pathDetailMap.setMarkers(markers)
				that.markers = markers
				
			},
			getCarMarkerObj(item,i){
				var data = {}
		
				data = {
				   id: item.item.next_station,
				   latitude:item.item.y,
				   longitude: item.item.x,
				   iconPath: '/static/images/bus/bus_icon7.png',
				   width: 42,
				   height: 68,
				   anchor: {
					  x: .5,
					  y: .5
				   },
				   rotate:item.item.azimuth,
				   callout: i==0&&item.item.station_left>=0?{
					   content: item.text,
					   bgColor: "#000000aa",
					   fontSize: 14,
					   color: "#ffffff",
					   borderRadius: 3,
					   display: "ALWAYS",
					   textAlign: "center",
					   padding: 10
				   }:''
				  //  label:{
						// content:item.bus_number,
						// color: "#1B1B1B",
						// fontSize: 12,
						// padding: 5,
						// textAlign: "center",
						// bgColor: "#ffffff",
						// borderRadius:5
				  //  }
				}	
				
				return data
			},
			selectStationMarkerObj(item,t){
				var data = {}
				var that = this
				data = {
				   id: item.id,
				   latitude:item.lat,
				   longitude: item.lng,
				   iconPath: '/static/images/bus/ic-bus-stop-select.png',
				   width: 32,
				   height: 37,
				   label: that.scale<15?{
						content: item.name,
						color: "#1B1B1B",
						fontSize: 12,
						padding: 1,
						textAlign: "center",
						bgColor: "#ffffff",
						borderRadius:5,
						y: "IOS" === that.systemType ? 10 : 7,
						x: -(item.name.length % 2 == 0 ? item.name.length / 2 * 12 : (item.name.length - 1) / 2 * 12 + Math.floor(6)) - 3
					}:''
				}	
				
				return data
			},
			refreshHandel(){
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: "linear",
					transformOrigin: "50% 50% 0"
				})
				animation.rotateZ(360 * (this.ExAnimationNum)).step()
				// 导出动画数据传递给data层
				this.animationData = animation.export()
				this.ExAnimationNum++
				
				clearInterval(this.setInterName)
				this.isRealtimeLine ? (this.isRefreshing = !0, this.getRealBus(this.stationId)) :'';
				setTimeout(function(){
					that.$u.toast('刷新成功')
				},500)

			},
			onLocation(){
				let map = uni.createMapContext('pathDetailMap');
				map.moveToLocation({
					latitude: this.selectStation.lat - (0 == this.expandLevel ? 0 : .0136),
					longitude: this.selectStation.lng
				})
			},
			loginSuccess:function(data){
				if(data.flag==true){
					 this.isCollectLine()
				} else{
					
				}
				
			}
					 
	    }
	}
</script>

<style>
.container {
    background: #fff;
    overflow: hidden;
	min-height: 100%;
	color: #888;
}

.container,.map {
    width: 100%;
    height: 100%;
    position: absolute;
}
	
.layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 88;
}

.layer,.min-layer {
    width: 100%;
  /*  display: flex; */
}

.min-layer {
    height: 100%;
    background: #fff;
    box-shadow: 0 -10rpx 20rpx 0 rgba(0,0,0,.09);
    border-radius: 20rpx 20rpx 0 0;
    flex-direction: column;
    align-items: center;
}
.top-panel {
    width: 100%;
}
.flex-h-vcenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex-v {
	display: flex;
    flex-direction: column;
}
.v-location {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
    margin-bottom: 24rpx;
}
.footer{
	width: 100%;
	position: fixed;
	left: 0rpx;
	right: 0rpx;
	bottom: 0rpx;
	z-index: 1000;
}
.wrap-footer{
	display: flex;
	height: 140rpx;
	background: #fefefe;
	box-shadow: inset 0 1px 0 0 rgba(211,211,216,.5);
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.marginleft40-row-flex{
	display: flex;
	margin-left: 40rpx;
}

.shoucang1 {
		line-height: 1.1;
		color: #999;
		font-size: 18px;
	    margin-right:15px;
		float: right;
	}
	
	.shoucang2 {
		line-height: 1.1;
		color: #ffaa00;
		font-size: 18px;
		float: right;
		margin-right: 15px;
	}
	.collect{
		font-size: 15px;
		margin-left: 2px;
		color: #000;
	}
	.arrup-main{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7px 0 4px;
	}
	
	.map-contarin {
	    top: 0;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	
	.map-content {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    min-height: 240rpx;
	}
	.line-text{
		float: right;
		margin-right: 20px;
		color: #000;
		font-weight: 600;
		font-size: 20px;
	}
</style>
